/* eslint-disable quote-props */
import React from 'react';
import { Anchor, Row, Col } from 'antd';
import { parseXML } from 'utils/parser';
import { inquiryProcess } from 'services/process';
import { defaultRejectHandler } from 'utils/http';
import BpmnViewer from './BpmnViewer';
import BpmnForm from './Form';

const { Link } = Anchor;
const searchPattern = /^\?id=(.+)&name=(.+)$/;

export default class ProcessRun extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      xml: '',
      dataList: [],
      taskId: '',
    };
  }

  componentDidMount() {
    // for local test
    // fetch('/execution.bpmn')
    //   .then((response) => response.text())
    //   .then((text) => {
    //     const serviceList = parseXML(text);
    //     const newXml = editTaskName(text);
    //     this.setState({
    //       xml: newXml,
    //       dataList: serviceList,
    //     });
    //   });
    const { history: { location: { search } } } = this.props;
    const match = searchPattern.exec(search);
    const processId = match[1];
    inquiryProcess({ params: { processId } })
      .then((data) => data.bpmn, defaultRejectHandler)
      .then((text) => {
        const serviceList = parseXML(text);
        this.setState({
          xml: text,
          dataList: serviceList,
        });
      });
  }

  render() {
    const { xml, dataList, taskId } = this.state;
    const { history: { location: { search } } } = this.props;
    const match = searchPattern.exec(search);
    const processId = match[1];
    const processName = decodeURI(match[2]);
    return (
      <Row gutter={40}>
        <Col span={20}>
          <div id="viewer" style={{ marginBottom: '40px' }}>
            <BpmnViewer
              dataSource={xml}
              name={processName}
              setChosenId={(i) => this.setState({ taskId: i })}
            />
          </div>
          <div id="form">
            <BpmnForm dataSource={dataList} xml={xml} name={processId} taskId={taskId} />
          </div>
        </Col>
        <Col span={4}>
          <Anchor>
            <Link href="#viewer" title="流程图" />
            <Link href="#form" title="设置参数" />
          </Anchor>
        </Col>
      </Row>
    );
  }
}
